import useStore from '@/context/useStore';
import { ILoginForm } from '@/utils/types';
import { Form, Input, Button, Checkbox, InputNumber, Row } from 'antd';
// import { Form, Input, InputNumber, Button } from 'antd';
import { Col, message } from 'antd';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { Link } from 'umi';
import styles from './login.less';

export default function () {
  const onFinish = (values: any) => {
    console.log(values);
  }
  const [codeUrl, setCodeUrl] = useState("")
  /* eslint-disable no-template-curly-in-string */
  const validateMessages = {
    user: '${label}不能为空',
    password: '${label}不能为空',
  };
  // const Login = () => {
  //   const {user} = useStore();
  //   useEffect(() => {
  //     user.setLogin();
  //   }, [])

  // const onFinish = async (values: ILoginForm) => {
  //   let result = await user.login(values);
  //   if (result){
  //     message.success('登陆成功');

  //   }else{
  //     message.success('登陆失败');
  //   }
  // };
  //获取验证码
  const getCode = () => {
    setCodeUrl("")
  }
  return <div className="login">
    <div className="login-box">
      <div className="top">
        <div className="logo">
          <p>电商运营后台</p>
        </div>
      </div>
      <div className="mid">
        <Form
          name="nest-messages"
          onFinish={onFinish}
          validateMessages={validateMessages}>
          <Form.Item
            className='info'
            name={['user', 'name']}
            label="账号"
            rules={[{ user: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            className='info'
            name={['user', 'email']}
            label="密码"
            rules={[{ password: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            name={['user', 'website']}
            label="验证码">
            <Row>
              <Col span={14} push={10}>
                <Input />
              </Col>
              <Col span={10} pull={14}>
                <img src={codeUrl}
                  onClick={getCode}
                  alt="" />
              </Col>
            </Row>,
          </Form.Item>
          <Form.Item >
            <Button
              type="primary"
              htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>

      <div className="bottom">Copyright © 2021 北京八维教育集团</div>
    </div>
  </div>


};
